<template>
	<div class="y" style="background-color: #ffaa00;height: 150px;border-radius: 0 0 50% 50%/0 0 15% 15%;">
		<div class="x" style="margin-top: 22px;margin-left: 20px;">
			<image src="/static/004_位置.png" style="width: 20px;height: 24px;"></image>
			<span style="font-size: 15px;">北海职业学院</span>
			<image src="/static/下载.png" style="width: 15px;height: 15px;margin-left: 14px;"></image>
			<image src="/static/扫一扫.png" style="width: 20px;height: 24px;margin-left: 230px;"></image>
		</div>
		<div style="margin: 10px 16px;">
			<input type="text" class="search" placeholder="搜索">
		</div>
		<div>
			<image src="/static/11.png" style="width: 350px;height: 100px;margin-left: 40px;"></image>
		</div>
		<div class="x" style="margin: 15px 12px;">
			<image src="/static/下载 (1).png" style="width: 17px;height: 17px;margin-left: 12px;"></image>
			<span style="font-size: 14px;color: #a1a1a1;margin-left: 10px;">免费配送</span>
			<image src="/static/下载 (2).png" style="width: 17px;height: 17px;margin-left: 12px;"></image>
			<span style="font-size: 14px;color: #a1a1a1;margin-left: 10px;">晚到必赔</span>
			<image src="/static/下载 (3).png" style="width: 17px;height: 17px;margin-left: 12px;"></image>
			<span style="font-size: 14px;color: #a1a1a1;margin-left: 10px;">专业检测</span>
			<image src="/static/下载 (4).png" style="width: 17px;height: 17px;margin-left: 12px;"></image>
			<span style="font-size: 14px;color: #a1a1a1;margin-left: 10px;">30分钟到达</span>
		</div>
		<div>
			<image src="/static/G2urVA.png" style="width: 350px;height: 90px;margin-left: 40px;"></image>
		</div>
		<div class="x" style="margin: 10px 40px;">
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/0f0351d58aee426a8efb6478409765d3.png"
					style="width: 40px;height: 40px;border-radius: 20px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">今日推荐</span>
			</div>
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/1bf57ee9c8c44ab6b015c32d2af232c7.png"
					style="width: 40px;height: 40px;border-radius: 12spx;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">时尚短袖</span>
			</div>
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/73cfd3c3600843f99cd703f16213a3ea.png"
					style="width: 40px;height: 40px;border-radius: 12px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">今日爆火</span>
			</div>
			<div class="y">
				<image src="/static/4.png" style="width: 40px;height: 40px;border-radius: 12px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">今日必买</span>
			</div>
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/b68b93dcdd33406385f7cf3ab7b95b5b.png"
					style="width: 40px;height: 40px;border-radius: 12px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">邀请有礼</span>
			</div>
		</div>
		<div class="x" style="margin: 10px 40px;">
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/ca32f789cc884ee99ca882257db5e89d.png"
					style="width: 40px;height: 40px;border-radius: 12px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">懒人菜单</span>
			</div>
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/792f2ecff583479784ba903e7f3c8720.png"
					style="width: 40px;height: 40px;border-radius: 12px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">疯狂折扣</span>
			</div>
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/db1ed3ffefb74fd380dcf567ce0d64fa.png"
					style="width: 40px;height: 40px;border-radius: 12px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">团购商品</span>
			</div>
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/f0b6c7f4f17c4924a7cb6b1145b98a4e.png"
					style="width: 40px;height: 40px;border-radius: 12px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">掌柜推荐</span>
			</div>
			<div class="y">
				<image src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/44389bbbf30745a382d63a9fa70f548f.png"
					style="width: 40px;height: 40px;border-radius: 12px;margin-left: 19px;">
				</image>
				<span style="margin-left: 12px;font-size: 13px;margin-top: 10px;">精品推荐</span>
			</div>
		</div>
		<view class="index_Notice">
			<view class="index_Notice_title">新鲜时报</view>
			<view class="index_Notice_text">
				<text id="mjltesta">新鲜水果上市</text>
			</view>
		</view>
		<div>
			<image src="../../static/bought.d0773e19.png" class="a2"></image>
		</div>
	</div>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},
	}
</script>

<style>
	.x {
		display: flex;
		flex-direction: row;
	}

	.y {
		display: flex;
		flex-direction: column;
	}

	.search {
		height: 36px;
		border-radius: 18px;
		/* outline: none; */
		border: 1px solid #ccc;
		padding-left: 20px;
		/* position: absolute; */
		background-color: #fff;
	}

	.index_Notice {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
	}

	.index_Notice_title {
		display: inline-block;
		border-radius: 3px;
		color: #ffaa00;
		/* background:red; */
		padding: 0px 5px;
		font-size: 14px;
		height: 20px;
		/* width:80px; */
	}

	.index_Notice_text {
		color: #000000;
		font-size: 14px;
		margin-left: 5px;
		height: 20px;
		overflow: hidden;
		white-space: nowrap;
	}

	.index_Notice_text text {
		white-space: nowrap;
		animation: 20s loop linear infinite normal;
		display: inline-block;
		vertical-align: top;
	}

	@keyframes loop {
		0% {
			transform: translateX(350px);
			-webkit-transform: translateX(350px);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}

	@-webkit-keyframes loop {
		0% {
			transform: translateX(300px);
			-webkit-transform: translateX(300px);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}
	.a2{
		width: 300px;
		height: 40px;
		margin: 0px 12px;
	}
</style>